<template>
  <!-- 音频组件 -->
  <div class="vy-cmp-work-content-item vy-cmp-work-content-audio">
    <a-row>
      <a-col :span="6">
        <span class="vy-sign"></span>
        <span class="vy-title">{{ title }}</span>
      </a-col>
      <a-col :span="16">&nbsp;</a-col>
      <a-col :span="2" style="text-align:right;">
        <a-button type="link" style="padding:0;" @click="click_del_work"
          >删除</a-button
        >
      </a-col>
    </a-row>
    <div class="vy-cmp-audio-container">
      <div class="vy-cmp-audio-form">
        <a-form>
          <a-form-item>
            <a-row>
              <a-col :span="4" style="text-align: right; padding-right: 20px;">
                <span>上传音频</span>&nbsp;<span style="color: red;">*</span>
              </a-col>
              <a-col :span="4">
                <!-- <a-upload
                  :data="uploadCfg.data"
                  :accept="uploadCfg.accepts"
                  :headers="uploadCfg.headers"
                  :action="uploadCfg.uploadAction"
                  name="file"
                  :multiple="false"
                  :defaultFileList="defaultFileList"
                  @change="click_change_over"
                  :beforeUpload="before_check_file"
                >
                  <a-button :icon="loading ? 'loading' : 'upload'"
                    >上传音频</a-button
                  >
                </a-upload> -->
                <a-upload
                  name="file"
                  :customRequest="customRequest"
                  :multiple="false"
                  :defaultFileList="defaultFileList"
                  @change="click_change_over"
                  :beforeUpload="before_check_file"
                >
                  <a-button :icon="loading ? 'loading' : 'upload'"
                    >上传音频</a-button
                  >
                </a-upload>
              </a-col>
              <a-col :span="16" style="height:40px;display:flex;align-items:center;line-height:20px;">
                <span style="color: #BAB7B7; font-size:12px;"
                  >格式支持MP3、M4A、FLAC、OGG、WAV,音频时长不超过1小时</span
                >
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import { upload } from "../../../../../../util/txUpload.js";
const CMP_TYPE = 122; // 组件类型
export default {
  name: "vy-cmp-work-content-audio",
  props: ["title", "index", "source"],
  data() {
    return {
      projectId: null, // 项目id
      loading: false, // 上传按钮的 loading 效果
      // 上传文件配置
      uploadCfg: {
        // 允许上传的文件
        accepts: "audio/mp3",
        // 上传接口
        uploadAction:
          "https://minitool.xuexiwangzhe.com/miniapp/uploadNormalFile/pcUpload",
        // 上传所需要的参数
        data: {
          type: CMP_TYPE,
        },
        // 上传所需要的 header 信息
        headers: {
          SESSIONKEY: "",
        },
      },
      isNoticed: false, // 是否已提醒
      defaultFileList: [], // 默认已经上传的文件列表
    };
  },
  mounted() {
    // 读取上传所需要的 SESSIONKEY
    let _key = window.sessionStorage.getItem("SESSIONKEY");
    this.uploadCfg.headers.SESSIONKEY = _key || "";

    if (this.source.fileName) {
      // 设置后端返回的已上传文件
      this.defaultFileList.push({
        uid: this.source.fileName.split(".")[0],
        name: this.source.fileName,
        status: "done",
        url: this.source.savePath,
      });
    }
  },
  methods: {
    // 上传文件之前检测文件信息
    before_check_file(file) {
      if (this.loading) {
        this.$message.error("正在上传中，请等待...");
        return false;
      }
      const isLt20M = file.size / 1024 / 1024 < 20;
      if (!isLt20M) {
        this.$message.error("文件必须小于20MB");
      }
      return isLt20M;
    },
    customRequest(options) {
      upload(
        this.$axios,
        { classId: 762063 },
        options.file,
        (info) => {
          options.onProgress({ percent: info.percent * 100 }, options.file);
        },
        (result) => {
          result["fileName"] = options.file.name;
          options.onSuccess(result, options.file);
        }
      );
    },
    // 上传文件改变时的状态
    click_change_over(uploadInfo) {
      if (!this.isNoticed) {
        if (uploadInfo.fileList.length >= 2) {
          this.isNoticed = true;
          this.$message.error("多次上传无效，仅保存最后一次上传结果。");
        }
      }
      // 改变时的状态有: uploading done error removed
      let _status = uploadInfo.file.status;
      switch (_status) {
        case "uploading": // 上传中
          this.loading = true;
          break;
        case "done": // 成功
          this.loading = false;
          this.isNoticed = false;
          let res = uploadInfo.file.response;
          if (res.fileId) {
            this.$message.success(res.msg || "上传成功");
            // 记录返回的信息，保存时需要使用
            this.source.fileName = res.fileName;
            this.source.savePath = res.video.url;
            this.source.keyName = res.fileId;
          } else {
            this.$message.error("上传出错了");
          }
          break;
        case "error": // 失败
          this.loading = false;
          this.isNoticed = false;
          this.$message.error(`${uploadInfo.file.name} 上传失败`);
          break;
        case "removed": // 移除
          this.loading = false;
          this.isNoticed = false;
          break;
      }
    },
    // 删除当前作业
    click_del_work() {
      this.$emit("del_work_content", this.index);
    },
  },
};
</script>

<style type="text/css" lang="scss">
.vy-cmp-work-content-audio {
  width: 100%;
  height: 100%;
  background: #ffffff;
  .vy-form-footer {
    text-align: center;
    margin-bottom: 0;
    .ant-btn {
      padding: 0 100px;
      &.ant-btn-primary {
        background: rgba(51, 102, 255, 1);
        &:hover {
          background: rgba(51, 102, 255, 0.8);
        }
        &[disabled] {
          background: #f5f5f5;
          &:hover {
            background: #f5f5f5;
          }
        }
      }
    }
  }
}
</style>
